<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-07-19 14:20:31
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-12-03 16:31:14
 * @FilePath: \hd_ims_web\src\views\board\boardSelect\board_mould_status copy.vue
 * @Description: 机台水流量历史曲线查询展示
-->
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item label="时间：">
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="查询日期"
              style="width: 320px"
              format="yyyy-MM-dd"
              autocomplete="off"
              @change="getWaterData"></el-date-picker>
          </el-form-item>
          <el-form-item label="机台：">
            <el-select filterable clearable v-model="jtbh" @change="getWaterData">
              <el-option v-for="item in listJtmJtbh" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <v-chart :options="chartOpt_water_3" class="" :autoresize="true" style="width: 100%; height: 350px"></v-chart>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <v-chart :options="chartOpt_water_4" class="" :autoresize="true" style="width: 100%; height: 350px"></v-chart>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PythonService from '@/api/python/python'
import BoardService from '@/api/board/board'

export default {
  name: 'HistoryWater',
  data() {
    return {
      loading: false,
      jtbh: '',
      listJtmJtbh: [],
      dataWater: [],
      date: this.$moment().add(-1, 'days').format(),
      waterMaxQian: 0,
      waterMaxHou: 0,
    }
  },
  computed: {
    chartOpt_water_1() {
      return {
        dataset: {
          source: this.dataWater,
        },
        title: {
          text: '水流量{b|-定模} ',
          x: '5px',
          textStyle: {
            color: '#555',
            fontSize: '20',
            rich: {
              b: {
                color: '#d16c4d',
                fontSize: '16',
              },
            },
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',
          },
        },
        legend: {
          show: true,
          x: 'right',
          itemWidth: 40,
          itemHight: 30,
          textStyle: {
            fontSize: 16,
          },
        },
        grid: {
          borderWidth: 0,
          top: 45,
          left: 20,
          bottom: 25,
          textStyle: {
            color: '#555',
          },
        },
        xAxis: [{ type: 'time', axisLabel: { show: false } }],
        yAxis: [
          {
            type: 'value',
            name: '流量',
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            axisTick: { show: false },
            axisLabel: {
              interval: 0,
            },
            nameGap: 5,
            splitArea: { show: false },
            style: {
              color: '#555',
            },
          },
          {
            type: 'value',
            name: '热功率',
            nameGap: 5,
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            axisTick: { show: false },
            axisLabel: {
              interval: 0,
            },
            splitArea: { show: false },
            style: {
              color: '#555',
            },
            max: function (value) {
              return value.max * 2
            },
          },
        ],
        series: [
          {
            name: '流量',
            type: 'line',
            itemStyle: { color: '#ed4014' },
            // lineStyle: { width: 1 },
            dimensions: [{ name: 'time_start', type: 'time' }, 'liusu_30_qian'],
            yAxisIndex: 0,
          },
          {
            name: '热功率',
            type: 'line',
            dimensions: [{ name: 'time_start', type: 'time' }, 'regonglv_30_qian'],
            yAxisIndex: 1,
            itemStyle: { color: 'rgba(0,191,183,1)' },
          },
        ],
      }
    },
    chartOpt_water_2() {
      return {
        dataset: {
          source: this.dataWater,
        },
        title: {
          text: '进出水温{b|-定模} ',
          x: '5px',
          textStyle: {
            color: '#555',
            fontSize: '20',
            rich: {
              b: {
                color: '#d16c4d',
                fontSize: '16',
              },
            },
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',
          },
        },
        legend: {
          show: true,
          x: 'right',
          itemWidth: 40,
          itemHight: 30,
          textStyle: {
            fontSize: 16,
          },
        },
        grid: {
          borderWidth: 0,
          top: 45,
          left: 20,
          bottom: 25,
          textStyle: {
            color: '#555',
          },
        },
        xAxis: [{ type: 'time', axisLabel: { show: false }, axisTick: { show: false }, splitLine: { show: false } }],
        yAxis: [
          {
            type: 'value',
            name: '进水温',
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            axisTick: { show: false },
            axisLabel: {
              interval: 0,
            },
            nameGap: 5,
            splitArea: { show: false },
            style: {
              color: '#555',
            },
            max: (value) => {
              return this.waterMaxQian
            },
          },
          {
            type: 'value',
            name: '出水温',
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            axisTick: { show: false },
            axisLabel: {
              interval: 0,
            },
            nameGap: 5,
            splitArea: { show: false },
            style: {
              color: '#555',
            },
            max: (value) => {
              return this.waterMaxQian
            },
          },
        ],
        series: [
          {
            name: '进水温',
            type: 'line',
            itemStyle: { color: 'rgba(0,191,183,1)' },
            // lineStyle: { width: 1 },
            dimensions: [{ name: 'time_start', type: 'time' }, 'gongshui_30_qian'],
            yAxisIndex: 0,
          },
          {
            name: '出水温',
            type: 'line',
            dimensions: [{ name: 'time_start', type: 'time' }, 'huishui_30_qian'],
            yAxisIndex: 1,
            itemStyle: { color: '#ed4014' },
          },
        ],
      }
    },
    chartOpt_water_3() {
      return {
        dataset: {
          source: this.dataWater,
        },
        title: {
          text: '水流量{b|-动模} ',
          x: '5px',
          textStyle: {
            color: '#555',
            fontSize: '20',
            rich: {
              b: {
                color: '#2d8cf0',
                fontSize: '16',
              },
            },
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',
          },
        },
        legend: {
          show: true,
          x: 'right',
          itemWidth: 40,
          itemHight: 30,
          textStyle: {
            fontSize: 16,
          },
        },
        grid: {
          borderWidth: 0,
          top: 75,
          left: 50,
          right: 50,
          bottom: 50,
          textStyle: {
            color: '#555',
          },
        },
        xAxis: [{ type: 'time', minInterval: 60000 * 15, splitNumber: 24 }],
        yAxis: [
          {
            type: 'value',
            name: '流量',
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            style: {
              color: '#555',
            },
          },
          {
            type: 'value',
            name: '热功率',
            nameGap: 5,
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            style: {
              color: '#555',
            },
            max: function (value) {
              return value.max * 2
            },
          },
        ],
        series: [
          {
            name: '流量',
            type: 'line',
            itemStyle: { color: '#ed4014' },
            // lineStyle: { width: 1 },
            dimensions: [{ name: 'time_start', type: 'time' }, 'liusu_29_hou'],
            yAxisIndex: 0,
          },
          {
            name: '热功率',
            type: 'line',
            dimensions: [{ name: 'time_start', type: 'time' }, 'regonglv_29_hou'],
            yAxisIndex: 1,
            itemStyle: { color: 'rgba(0,191,183,1)' },
          },
        ],
      }
    },
    chartOpt_water_4() {
      return {
        dataset: {
          source: this.dataWater,
        },
        title: {
          text: '进出水温{b|-动模} ',
          x: '5px',
          textStyle: {
            color: '#555',
            fontSize: '20',
            rich: {
              b: {
                color: '#2d8cf0',
                fontSize: '16',
              },
            },
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: true,
          x: 'right',
          itemWidth: 40,
          itemHight: 30,
          textStyle: {
            fontSize: 16,
          },
        },
        grid: {
          borderWidth: 0,
          top: 75,
          left: 50,
          right: 50,
          bottom: 50,
          textStyle: {
            color: '#555',
          },
        },
        xAxis: [{ type: 'time', minInterval: 60000 * 15, splitNumber: 24 }],
        yAxis: [
          {
            type: 'value',
            name: '进水温℃',
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            style: {
              color: '#555',
            },
            max: (value) => {
              return this.waterMaxHou
            },
          },
          {
            type: 'value',
            name: '出水温℃',
            axisLine: {
              lineStyle: {
                color: '#555',
              },
            },
            style: {
              color: '#555',
            },
            max: (value) => {
              return this.waterMaxHou
            },
          },
        ],
        series: [
          {
            name: '进水温',
            type: 'line',
            itemStyle: { color: 'rgba(0,191,183,1)' },
            // lineStyle: { width: 1 },
            dimensions: [{ name: 'time_start', type: 'time' }, 'gongshui_29_hou'],
            yAxisIndex: 0,
          },
          {
            name: '出水温',
            type: 'line',
            dimensions: [{ name: 'time_start', type: 'time' }, 'huishui_29_hou'],
            yAxisIndex: 1,
            itemStyle: { color: '#ed4014' },
          },
        ],
      }
    },
  },
  methods: {
    getWaterData() {
      PythonService.getWaterData({
        input_jitaicode: this.jtbh,
        pageSize: 97,
        input_time_start: this.$moment(this.date).startOf('day').format(),
        input_time_end: this.$moment(this.date).add(1, 'day').startOf('day').minute(5).format(),
      }).then((res) => {
        this.dataWater = res.data
          .filter((o) => {
            return this.$moment(res.data[0].time_start).diff(this.$moment(o.time_start), 'minutes') <= 24 * 60 + 5
          })
          .reverse()
        this.waterMaxQian = Math.ceil(
          this.dataWater.reduce((a, b) => {
            const tb = parseFloat(b.gongshui_30_qian) > parseFloat(b.huishui_30_qian) ? b.gongshui_30_qian : b.huishui_30_qian
            return a > parseFloat(tb) ? a : parseFloat(tb)
          }) + 6
        )
        this.waterMaxHou =
          Math.ceil(
            this.dataWater.reduce((a, b) => {
              //const ta = a.gongshui_29_hou > a.huishui_29_hou ? a.gongshui_29_hou : a.huishui_29_hou
              const tb = parseFloat(b.gongshui_29_hou) > parseFloat(b.huishui_29_hou) ? b.gongshui_29_hou : b.huishui_29_hou
              return a > parseFloat(tb) ? a : parseFloat(tb)
            }, 0)
          ) + 6
      })
    },
  },
  mounted() {
    this.getWaterData()
    // 获取机台
    BoardService.getMachines().then((res) => {
      if (res.code === 200) {
        this.listJtmJtbh = res.data.map((a) => a.jtmJtbh)
      }
    })
  },
}
</script>
<style lang="scss" scoped></style>
